<template>
  <div class="registerbox">
    <el-card class="gray-card no-border no-margin-top" shadow="never">
      <el-form ref="form" :model="form" class="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="仪器编号：">
              <el-input v-model="form.instrumentNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器编名称：">
              <el-input v-model="form.instrumentName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仪器型号：">
              <el-input placeholder="请输入仪器型号" v-model="form.instrumentType"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可检验项目：">
              <el-select v-model="form.projectId"
                         @change="handleProjectChange"
                         placeholder="请选择检验项">
                <el-option
                  v-for="item in itemList"
                  :key="item.id"
                  :label="item.itemName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="可检验样本：">
              <el-select v-model="form.sampleId" @change="handleSamplChange" placeholder="请选择">
                <el-option
                  v-for="item in checkSampleList"
                  :key="item.id"
                  :label="item.sampleName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科室：">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
                          @select="handleNodeClick"
                          placeholder="请选择所在科室"/>
              <!--              <el-select v-model="form.deptId" @change="handleDeptChange" placeholder="请选择">-->
              <!--                <el-option-->
              <!--                  v-for="item in deptList"-->
              <!--                  :key="item.value"-->
              <!--                  :label="item.label"-->
              <!--                  :value="item.value">-->
              <!--                </el-option>-->
              <!--              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人：">
              <el-input placeholder="请填写负责人" v-model="form.personLiable"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理人：">
              <el-input placeholder="请填写管理人" v-model="form.manager"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产日期：">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择生产日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产产商：">
              <el-select v-model="form.manufacturer" placeholder="请选择">
                <el-option
                  v-for="item in manufacturerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="方法学：">
          <el-input type="textarea" class="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.methodology">
          </el-input>
        </el-form-item>

        <el-form-item label="注册信息：">
          <el-input type="textarea" class="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.regInfo">
          </el-input>
        </el-form-item>
        <el-form-item label="上传仪器图片：">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="临床应用：">
          <el-input type="textarea" class="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="form.dcf">
          </el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="details-foot">
      <div class="cell-btn">
        <el-button type="primary" @click.native="handleSubmit">立即创建</el-button>
        <el-button @click.native="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addInstrument, updateInstrument, getInstrument} from "@/api/business/instrument"
import {parseTime} from '@/utils/ruoyi'
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {queryItemList} from "@/api/business/projectTestitems"
import {listInstrumentSample} from "@/api/business/instrumentSample"

export default {
  name: "deviceDrawer",
  components: {Treeselect},
  data() {
    return {
      itemList: [],
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      deviceList: [],
      imageUrl: false,
      loading: false,
      redirect: undefined,
      registerShow: false,
      checkSampleList: [],
      manufacturerList: [
        {
          value: '诺唯赞',
          label: '诺唯赞'
        },
        {
          value: '省人民医院',
          label: '省人民医院'
        }
      ],
      form: {
        date: '',
        instrumentNo: '',
        instrumentName: '',
        instrumentType: '',
        checkProject: '',
        checkSample: '',
        deptId: 100,
        instrumentModel: '湖南省人民医院',
        personLiable: '',
        manager: '',
        prodDate: '',
        manufacturer: '',
        methodology: '',
        regInfo: '',
        dcf: '',
        projectId: '',
        sampleId: ''
      }
    };
  },
  created() {
    this.$nextTick(() => {
      this.getTreeselect();
      this.handleGetItemList();
      this.handleGetSampleData()
    })
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.form.instrumentModel = data.label
    },
    handleProjectChange() {
      this.form.checkProject = this.itemList.filter(x => x.id == this.form.projectId)[0].itemName
    },
    handleSamplChange() {
      this.form.checkSample = this.checkSampleList.filter(x => x.id == this.form.sampleId)[0].sampleName
    },
    handleSubmit() {
      this.form.prodDate = parseTime(this.form.date)
      addInstrument(this.form).then((res) => {
        this.$message.success('操作成功')
        this.handleClose()
      })
    },
    handleClose() {
      this.$emit('close', false)
    },
    // 获取检测项
    handleGetItemList() {
      queryItemList().then((res) => {
        this.itemList = res
      })
    },
    handleGetSampleData() {
      listInstrumentSample().then((res) => {
        this.checkSampleList = res.rows
      })
    }
  }
};
</script>
